<template>
  <div class="">
    <div :class="{ active: isActive }">
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 97%">
        <el-table-column prop="id" label="类别代码" width="450px">
        </el-table-column>
        <el-table-column prop="name" label="类别名称"> </el-table-column>
        <el-table-column prop="catalogue" label="专业目录" width="450px">
          <template slot-scope="scope">
            <div @click="edit" style="color:#468BED;cursor: pointer;">{{scope.row.catalogue}}</div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="paging">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage4" :page-sizes="[20, 40, 60, 80]" :page-size="20"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 专业目录点击表单 -->
    <div :class="{ active1: isActive1 }">
      <el-table :data="form" border style="width: 97%">
        <el-table-column prop="id" label="类别代码" width="450">
        </el-table-column>
        <el-table-column prop="name" label="类别名称"> </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="paging">
        <el-button class="paging-but" type="primary" @click="edit()">返回</el-button>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage4" :page-sizes="[20, 40, 60, 80]" :page-size="20"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  // 例如：import 《组件名称》 from '《组件路径》';

  export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data () {
      // 这里存放数据
      return {
        // 显示
        isActive: false,
        // 隐藏 
        isActive1: true,
        // 弹框
        dialogVisible: false,
        // 总页数
        total: 0,
        //表单绑定数组
        tableData: [
          {
            id: "01",
            name: "农林牧渔类",
            catalogue: "专业目录",
          },
          {
            id: "02",
            name: "资源环境类",
            catalogue: "专业目录",
          },
          {
            id: "03",
            name: "能源与新能源类",
            catalogue: "专业目录",
          },
          {
            id: "04",
            name: "土木水利类",
            catalogue: "专业目录",
          },
          {
            id: "05",
            name: "加工制造类",
            catalogue: "专业目录",
          },
        ],
        form: [
          {
            id: "01",
            name: "农林牧渔类1",
          },
          {
            id: "02",
            name: "资源环境类1",
          },
          {
            id: "03",
            name: "能源与新能源类1",
          },
          {
            id: "04",
            name: "土木水利类1",
          },
          {
            id: "05",
            name: "加工制造类1",
          },
        ],
      };
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
      // 表单显示隐藏
      edit () {
        this.isActive = !this.isActive;  //当点击按钮触发事件时改变两个按钮的显示
        this.isActive1 = !this.isActive1;
      },
      // 分页
      handleSizeChange () { },
      handleCurrentChange () { },
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () { },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted () { },
    beforeCreate () { }, // 生命周期 - 创建之前
    beforeMount () { }, // 生命周期 - 挂载之前
    beforeUpdate () { }, // 生命周期 - 更新之前
    updated () { }, // 生命周期 - 更新之后
    beforeDestroy () { }, // 生命周期 - 销毁之前
    destroyed () { }, // 生命周期 - 销毁完成
    activated () { }, // 如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>
<style lang='scss' scoped>
  .title {
    color: #7f7f7f;
    margin: 20px 0px 0px 20px;
  }

  .title-l {
    font-size: 15px;
  }

  .el-table {
    margin: 20px;
  }

  .paging {
    width: 97%;
    height: 80px;
    background-color: #f5f5f5;
    margin: 20px;
  }

  .el-pagination {
    float: right;
    margin: 25px 0px 0px 0px;
  }

  /* 隐藏 */
  .active {
    display: none;
  }

  /* 隐藏 */
  .active1 {
    display: none;
  }

  .paging-but {
    margin: 25px 0px 0px 20px;
  }
</style>